import React, { useState, useEffect } from 'react';
import EchartsWrap from '@/components/widgets/EchartsWrap';
import 'echarts-liquidfill/src/liquidFill.js';

const progressValue = 70;

let outRingStyle = {
  normal: {
    color: 'rgba(57,61,80,0.5)',
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
  },
  emphasis: {
    color: 'rgba(57,61,80,0.5)',
  },
};

let option = {
  toolbox: {
    show: false,
  },
  title: {
    text: progressValue + '%',
    subtext: '总进度',
    x: 'center',
    y: '38px',
    textStyle: {
      fontSize: 18,
      fontWeight: 'bold',
      color: '#2FB0FF',
      fontFamily: 'zcool',
    },
    subtextStyle: {
      color: '#fff',
      fontSize: 12,
      fontFamily: 'zcool',
    },
  },
  series: [
    {
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['83%', '86%'],
      hoverAnimation: false,
      data: [
        {
          value: 100 - progressValue,
          tooltip: {
            show: false,
          },
          itemStyle: outRingStyle,
        },
        {
          value: progressValue,
          itemStyle: {
            normal: {
              color: '#2FB0FF',
              borderColor: '#2FB0FF',
            },
          },
        },
      ],
      itemStyle: {
        normal: {
          // borderColor: 'RGBA(26, 29, 31, 1)',
          // borderWidth: 4,
        },
      },
      label: {
        normal: {
          show: false,
        },
      },
    },
    {
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['96%', '98%'],
      hoverAnimation: false,
      data: [
        {
          value: progressValue,
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,0.1)',
            },
          },
        },
      ],
      label: {
        normal: {
          show: false,
        },
      },
    },
    {
      type: 'liquidFill',
      radius: '60%',
      center: ['50%', '50%'],
      data: [0.5], // data个数代表波浪数
      backgroundStyle: {
        borderWidth: 1,
        color: 'rgba(255, 255, 255, 0.0)',
      },
      label: {
        normal: {
          show: false,
        },
      },
      color: ['rgba(255, 255, 255, 0.2)'],
      outline: {
        borderDistance: 0,
        itemStyle: {
          borderWidth: 1,
          borderColor: 'rgba(255, 255, 255, 0.2)',
        },
      },
    },
  ],
};

const DoubleRingChart = ({ progressValue }) => {
  const [curData, setCurData] = useState(option);
  useEffect(() => {
    const newOption = JSON.parse(JSON.stringify(option));
    newOption.title.text = progressValue + '%';
    newOption.series[0].data[0].value = 100 - progressValue;
    newOption.series[0].data[1].value = progressValue;
    // newOption.series[1].data[0].value = 100 - progressValue;
    // newOption.series[1].data[1].value = progressValue;
    setCurData(newOption);
  }, [progressValue]);
  return <EchartsWrap option={curData} style={{ width: 120, height: 120 }}></EchartsWrap>;
};
export default DoubleRingChart;
